<template>
    <div class="app-container">
        <div class="success-box">
            <div class="top">
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <h3>下单成功！</h3>
            </div>

            <div class="bottom">
                <!-- <p>订单编号： 49328490324893208</p> -->
                <div class="bottom-btn">
                    <el-button type="warning" @click="goUserInfo">去支付</el-button>
                    <el-button type="warning" plain @click="goBack">返回</el-button>
                </div>
            </div>
        </div>

    </div>
</template>
 
<script>
export default {
    name: 'OrderSuccess',
    data() {
        return {

        }
    },
    methods: {
        goUserInfo() {
            this.$router.push({
                path: '/user'
            })
        },
        goBack() {
            this.$router.push({
                path: '/attraction/' + this.$route.query.attrId
            })
        }

    }
}
</script>
 
<style lang="less" scoped>
.app-container {
    width: 1000px;
    margin: 0 auto;

    .success-box {
        width: 100%;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        height: 400px;

        .top {

            display: flex;
            align-items: center;

            h3 {
                display: block;
                margin-left: 30px;
            }

        }

        .bottom {
            border-top: 1px solid #ccc;
            margin-top: 10px;
            margin-left: 70px;
            display: flex;
            flex-direction: column;
            .bottom-btn {
                margin-top: 10px;
            }
        }

    }
}
</style>